<template>
  <div id="addQuestion">
    <h2>新增题目</h2>
    <a-form
      :model="form"
      :style="{ width: '600px' }"
      @submit="handleSubmit"
      label-align="left"
      style="width: 800px"
    >
      <a-form-item field="title" label="标题">
        <a-input v-model="form.title" placeholder="请输入标题" />
      </a-form-item>
      <a-form-item field="tags" label="标签列表">
        <a-input-tag v-model="form.tags" placeholder="请输入标签" />
      </a-form-item>
      <a-form-item field="content" label="内容">
        <MdEditor :value="form.content" :handleChange="changeContent" />
      </a-form-item>

      <a-form-item field="answer" label="答案">
        <MdEditor :value="form.answer" :handleChange="changeAnswer" />
      </a-form-item>

      <a-form-item label="判题配置" :content-flex="false" :merge-props="false">
        <a-space direction="vertical" fill>
          <a-form-item field="judgeConfig.timeLimit" label="时间限制">
            <a-input-number
              v-model="form.judgeConfig.timeLimit"
              placeholder="请输入时间限制"
            />
          </a-form-item>
          <a-form-item field="judgeConfig.stackLimit" label="堆栈限制">
            <a-input-number
              v-model="form.judgeConfig.stackLimit"
              placeholder="请输入堆栈限制"
            />
          </a-form-item>
          <a-form-item field="judgeConfig.memoryLimit" label="内存限制">
            <a-input-number
              v-model="form.judgeConfig.memoryLimit"
              placeholder="请输入内存限制"
            />
          </a-form-item>
        </a-space>
      </a-form-item>

      <a-form-item label="测试用例"></a-form-item>
      <a-form-item
        v-for="(judgeCase, index) of form.judgeCase"
        :label="`测试用例-${index}`"
        :key="index"
      >
        <a-space>
          <a-form-item
            style="width: 400px"
            :field="`form.judgeCase[${index}].inputCase`"
            label="输入用例"
          >
            <a-input
              v-model="judgeCase.inputCase"
              placeholder="请输入输入用例"
            />
          </a-form-item>
          <a-form-item
            :field="`form.judgeCase[${index}].outputCase`"
            label="输出用例"
            style="width: 400px"
          >
            <a-input
              v-model="judgeCase.outputCase"
              placeholder="请输入输出用例"
            />
          </a-form-item>
          <a-form-item>
            <a-button
              @click="handleDelete(index)"
              :style="{ marginLeft: '10px' }"
              >Delete
            </a-button>
          </a-form-item>
        </a-space>
      </a-form-item>
      <a-form-item>
        <a-button type="outline" status="success" @click="handleAdd"
          >新增测试用例</a-button
        >
      </a-form-item>

      <a-form-item>
        <a-button type="primary" style="min-width: 115px" html-type="submit"
          >提交
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import MdEditor from "@/components/MdEditor.vue";
import { QuestionControllerService } from "../../../generated";
import { Message } from "@arco-design/web-vue";

let form = ref({
  title: "",
  content: "",
  tags: [],
  answer: "",
  judgeCase: [
    {
      inputCase: "",
      outputCase: "",
    },
  ],
  judgeConfig: {
    timeLimit: "",
    stackLimit: "",
    memoryLimit: "",
  },
});

const handleAdd = () => {
  form.value.judgeCase.push({
    inputCase: "",
    outputCase: "",
  });
};
const handleDelete = (index: any) => {
  form.value.judgeCase.splice(index, 1);
};

console.log("t", form.value.content);

const changeContent = (value: string) => {
  form.value.content = value;
};

const changeAnswer = (value: string) => {
  form.value.answer = value;
};

const handleSubmit = async () => {
  const res = await QuestionControllerService.addQuestionUsingPost(form.value);
  if (res.code === 0) {
    Message.success("新增成功");
  } else {
    Message.error("新增失败:" + res.message);
  }
};
</script>

<style scoped>
#addQuestion {
  padding: 20px;
}
</style>
